<html>
<head>
	<title>ISM Publisher WebSocket Sample</title>
	<link rel="stylesheet" href="css/ismSamples.css" />
	<link rel="stylesheet" href="css/ism_sample_web.css" />
	<script type="text/javascript"src="js/mqttws31.js"></script>
	<script type="text/javascript"src="js/ism_sample_web.js"></script>
	<script type="text/javascript">
		// Set this URL to the sample help link
		var helpLoc = "http://www.google.com";

		function help() {
			document.location.href = helpLoc;
		}
	</script>
<!-- 
/*
 * Copyright (c) 2012-2021 Contributors to the Eclipse Foundation
 * 
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 * 
 * SPDX-License-Identifier: EPL-2.0
 */
-->
</head>
<body onload="setWSS();">
	<div class="demoHeader">
		<div class="demoHeaderPrimary">
			<div class="demoHeaderPrimaryInner">
				<span>
					<div class="demoHeaderPrimaryTitle">IBM Messaging Appliance</div>
				</span>
			</div>
			<span>
				<div class="demoHeaderLogoBox">
					<div class="demoHeaderIBMLogo" alt="IBM®"></div>
				</div>
				<div class="demoHeaderHelpLogo" id="help" alt="Help" onclick="help()"></div>
			</span>
		</div>
		<div class="demoBlueLip"></div>
	</div>
	<div class="demoTitleContainer">
		<span class="demoTitle">ISM WebSocket Sample</span>
	</div>
	<div class="demoGrayLip"></div>
	<div class="demoContentContainer">
	<!-- Container with a sidebar on the left -->
		<div class="demoSLSidebarContainer" id="sidebar">
			<div name="ismcommon">
				<h2 class='top center'>Configuration</h2><hr>
				<div class="control" style="padding-bottom: 10px;">
					<div class="label" style="width: 140px;">ISM Server URL:</div>
					<div class="field"><input name="fullURL" id="fullURL" readonly disabled size="25" value="ws://IP:Port/mqtt" />&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Use secure WebSockets:</div>
					<div class="field"><input type="checkbox" name="wss" id="wss" onClick="setWSS();">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">User ID:</div>
					<div class="field"><input name="ismUID" id="ismUID" size="15" />&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Password:</div>
					<div class="field"><input type="password" name="ismPassword" id="ismPassword" size="15" />&nbsp;</div>
				</div>					
				<div class="control">
					<div class="label">IP Address:</div>
					<div class="field"><input name="ismIP" id="ismIP" size="15" value="10.10.10.10" onkeyup="setWSS();">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Port:</div>
					<div class="field"><input name="ismPort" id="ismPort" size="15" value="16102"  onkeyup="portIsNumeric(this); setWSS();">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Client ID:</div>
					<div class="field"><input name="ismClientId" id="ismClientId" size="15" maxLength="23">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Clean Session on Reconnection:</div>
					<div class="field"><input type="checkbox" name="ismCleanSession" id="ismCleanSession" checked >&nbsp;</div>
				</div>

				<div style='height: 30px;'></div>

				<h2 class='top center'>Controls</h2><hr>
				<div class="control">
					<div class="label">Topic:</div>
					<div class="field"><input name="msgTopic" id="msgTopic" size="15" value="topicA">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Number of Messages:</div>
					<div class="field"><input name="msgCount" id="msgCount" type="text" size="5" value="3">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Message Text:</div>
					<div class="field"><input name="msgText" id="msgText" size="15" value="Sample Message">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Publisher Quality Of Service:</div>
					<div class="field">
						<select name="pubQoS" id="pubQoS" size="1"> 
							<option value="0" Selected>0
							<option value="1">1
							<option value="2">2
						</select>&nbsp;
					</div>
				</div>
				<div class="control">
					<div class="label">Retain Messages:</div>
					<div class="field"><input type="checkbox" name="retain" id="retain">&nbsp;</div>
				</div>
				<div class="control">
					<div class="label">Connect and Publish:</div>
					<div class="field"><button class="green" name="pubConnect" id="pubConnect" onclick="connectISMPublisher()">&nbsp;&nbsp;&nbsp;GO&nbsp;&nbsp;&nbsp;</button>&nbsp;</div>
				</div>
			</div>
		</div>
		
		<div class="demoSLMainContainer" style="height: 540px;" id="mainContent">
			<h1 class='top center'>Publisher</h1><hr>
			<h2>Instructions</h2>
			<ul>
				<li>Step 1</li>
				<li>Step 2</li>
				<li>Step 3</li>
			</ul>
			<hr>
			<h2>Output</h2>
			<textarea name="messages" id="messages"  rows="20" cols="62"></textarea>
		</div>
	</div>
	<div class="demoFooter">
		<div class="demoBlueLip"></div>
		<div class="demoFooterContent">
			Copyright information goes here
		</div>
	</div>

</body>
</html>
